/** 
 * 列表页搜索栏通用组件
 */
import { useState, useEffect, Fragment } from 'react';
import { Form, Row, Col, Button } from 'antd';
import './index.less';

// searchbar布局
const searchLayout = {
    xs: 24,
    sm: 24,
    md: 24,
    lg: 24,
    xl: 12,
    xxl: 8
}
function SearchBar(props: {
    queryItems: Array<any>;  // 检索条件 From.Item
    needFS?: boolean;
    onFinish?: Function;  // 查询回调
    onResetCallback?: Function;  // 重置回调
    optionBtns?: Array<any>;  // 操作按钮 Button
    initialValues?: any;  // 搜索初始值
}) {
    // 初始化 检索条件/操作按钮 数据
    const { queryItems = [], optionBtns = [], onFinish, onResetCallback, initialValues = {}, needFS = false, } = props;
    // 操作按钮个数
    const { length: opLength } = optionBtns;
    // From 组件useForm Hook
    const { useForm } = Form;
    // 搜索表单from对象
    const [searchFrom] = useForm();

    // 重置/查询按钮左边留白列数
    const [offSetLeft, setOffSetLeft] = useState<number>(0);

    // 搜索表单默认栅格比例
    const formLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
    };

    // 渲染完毕默认调用onFinish
    useEffect(() => {
        if (needFS) {
            onSearch();
        }
    }, []);

    useEffect(() => {
        // 查询条件个数
        const { length: quLength } = queryItems.filter(n => n);
        if (opLength === 0) {
            setOffSetLeft(2 - quLength % 3);
        }
    }, [optionBtns, queryItems]);


    // 查询
    const onSearch = () => {
        searchFrom.validateFields().then(values => {
            if (onFinish) {
                onFinish(values);
            }
        });
    };

    // 重置
    const onReset = () => {
        searchFrom.resetFields();
        if (onResetCallback) {
            onResetCallback();
        }
    };

    return (
        <Fragment>
            {
                (queryItems.filter(n => n)).length > 0 &&
                <div className='searchBarCom'>
                    <Form
                        form={searchFrom}
                        initialValues={initialValues}
                        {...formLayout}
                    >
                        <Row gutter={24}>
                            {/* 这边写死一行三列 */}
                            {
                                (queryItems.filter(n => n)).map((v, i) => {
                                    return (
                                        v.span ?
                                            <Col span={v.span} key={`search_${i}`}>{v.node}</Col>
                                            :
                                            <Col {...searchLayout} key={`search_${i}`}>{v}</Col>
                                    )
                                })
                            }
                            {
                                opLength === 0 &&
                                <Col span={8} offset={8 * offSetLeft}>
                                    <div className='searchBarCom-own'>
                                        <Button onClick={onReset}>
                                            重置
                                        </Button>
                                        <Button type="primary" onClick={onSearch}>
                                            查询
                                        </Button>
                                    </div>
                                </Col>
                            }
                        </Row>
                        <Row className='searchBarCom-option'>
                            {
                                optionBtns.length > 0 &&
                                <Fragment>
                                    <div>
                                        {
                                            optionBtns.map((v, i) => <Fragment key={`optionBtn_${i}`}>{v}</Fragment>)
                                        }
                                    </div>
                                    <div>
                                        <Button onClick={onReset}>
                                            重置
                                        </Button>
                                        <Button type="primary" onClick={onSearch}>
                                            查询
                                        </Button>
                                    </div>
                                </Fragment>
                            }
                        </Row>
                    </Form>
                </div>
            }
        </Fragment>
    );
}

export default SearchBar;